<!DOCTYPE html>

<html lang="en">
<head>
	<title>Master Slider :: Transition Gallery</title>
	<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
</head>
<body>

		<header>
			<div class="header-bar">
				<h1 class="title">Master Slider Transition Gallery</h1>
				<ul class="nav">
					<li>
						<a href="http://support.averta.net/envato/faq/master-slider/" class="faq">FAQ</a>
					</li>
					<li>
						<a href="http://support.averta.net/envato/support/master-slider/" class="forum">Support Forum</a>
					</li>
					<li>
						<a href="http://www.masterslider.com/doc/" class="doc">Documentation</a>
					</li>
					<li>
						<a href="http://www.masterslider.com/" class="home">Home</a>
					</li>
				</ul>
			</div>
		</header>
		
		<div class="main-cont">
			<div class="sidebar">
				<div class="logo-cont">
					<img src="images/logo.gif" alt="Master Slider" />
				</div>
				
				<div class="options">
					<div class="opttions-title first">Show Transition</div>
					<div class="options-cont"> 
						<label>Delay</label><input type="text" value="0" id="showdelay" /><label>ms</label>
						<div style="clear:both"> </div>
						<label>Duration</label><input type="text" value="1800" id="showduration" /><label>ms</label>
						<div style="clear:both"> </div>
						<label>Ease</label>
						<select id="showease">
						  <option value="linear" selected="selected">linear</option>
						  <option value="easeInCubic">easeInCubic</option>
						  <option value="easeOutCubic">easeOutCubic</option>
						  <option value="easeInOutCubic">easeInOutCubic</option>
						  <option value="easeInCirc">easeInCirc</option>
						  <option value="easeOutCirc">easeOutCirc</option>
						  <option value="easeInOutCirc">easeInOutCirc</option>
						  <option value="easeInExpo">easeInExpo</option>
						  <option value="easeOutExpo">easeOutExpo</option>
						  <option value="easeInOutExpo">easeInOutExpo</option>
						  <option value="easeInQuad">easeInQuad</option>
						  <option value="easeOutQuad">easeOutQuad</option>
						  <option value="easeInOutQuad">easeInOutQuad</option>
						  <option value="easeInQuart">easeInQuart</option>
						  <option value="easeOutQuart">easeOutQuart</option>
						  <option value="easeInOutQuart">easeInOutQuart</option>
						  <option value="easeInQuint">easeInQuint</option>
						  <option value="easeOutQuint">easeOutQuint</option>
						  <option value="easeInOutQuint">easeInOutQuint</option>
						  <option value="easeInSine">easeInSine</option>
						  <option value="easeOutSine">easeOutSine</option>
						  <option value="easeInOutSine">easeInOutSine</option>
						  <option value="easeInBack">easeInBack</option>
						  <option value="easeOutBack">easeOutBack</option>
						</select>
					</div>
					<div class="opttions-title">Hide Transition</div>
					<div class="options-cont"> 
						<label>Start</label><input type="text" value="" id="hidetime" /><label>ms</label>
						<div style="clear:both"> </div>
						<label>Duration</label><input type="text" value="" id="hideduration" /><label>ms</label>
						<div style="clear:both"> </div>
						<label>Ease</label>
						<select id="hideease">
						  <option value="null" selected="selected">--select--</option>
						  <option value="linear" >linear</option>
						  <option value="easeInCubic">easeInCubic</option>
						  <option value="easeOutCubic">easeOutCubic</option>
						  <option value="easeInOutCubic">easeInOutCubic</option>
						  <option value="easeInCirc">easeInCirc</option>
						  <option value="easeOutCirc">easeOutCirc</option>
						  <option value="easeInOutCirc">easeInOutCirc</option>
						  <option value="easeInExpo">easeInExpo</option>
						  <option value="easeOutExpo">easeOutExpo</option>
						  <option value="easeInOutExpo">easeInOutExpo</option>
						  <option value="easeInQuad">easeInQuad</option>
						  <option value="easeOutQuad">easeOutQuad</option>
						  <option value="easeInOutQuad">easeInOutQuad</option>
						  <option value="easeInQuart">easeInQuart</option>
						  <option value="easeOutQuart">easeOutQuart</option>
						  <option value="easeInOutQuart">easeInOutQuart</option>
						  <option value="easeInQuint">easeInQuint</option>
						  <option value="easeOutQuint">easeOutQuint</option>
						  <option value="easeInOutQuint">easeInOutQuint</option>
						  <option value="easeInSine">easeInSine</option>
						  <option value="easeOutSine">easeOutSine</option>
						  <option value="easeInOutSine">easeInOutSine</option>
						  <option value="easeInBack">easeInBack</option>
						  <option value="easeOutBack">easeOutBack</option>
						</select>
					</div>
				</div>
				<div class="cpyr">Designed by <a href="http://www.averta.net/" title="Averta" style="text-decoration: none; color:rgb(94, 115, 148)" target="_blank">Averta</a>. </div>
			</div>
			
			<div class="content">
				<div class="preview-cont">
					<div id="scene" class="scene">
						<div class="sence-control">
							<label>W: </label><input type="text" value="500" id="sw"> <label>H: </label><input value="350" type="text" id="sh">
						</div>
						<div class="box" id="box"> </div>
					</div>
					
				</div>
				<div class="output-cont">
						<div class="output-title">Output</div>
					<pre id="output"> </pre>
				</div>
				<div id="list-cont" class="list-cont"> </div>
			</div>
		</div>
		<script src="js/jquery-1.8.0.min.js"></script>	
		<script src="js/transition-dic.js"></script>	
		<script src="js/main.js"></script>
		<script>
			var _3dt = new TransitionGallery(document.getElementById('list-cont') , transitions).create();
		</script>
</body>
</html>
